<template>
	<view class="data_item">
		<image :src="icon"></image>
		<view class="data_item_info">
			<label>{{ title }}</label>
			<text>{{ val }}</text>
			<view class="rate" v-if="rate != null">
				<image v-if="rate>=0" src="/static/firstpage/up1.png" alt="" class="img2"></image>
				<image v-else src="/static/firstpage/up2.png" alt="" class="img2"></image>
				<view>
					{{ rate }}%
				</view>
				<view>{{ rateName }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
	icon: String,
	title: String,
	rate: { type: String, default: null },
	rateName: String,
	val: {
		type: String,
		default: 'top'
	}
});
</script>
<style lang="sass" scoped>
.data_item
	width: 50%
	margin-top: 30rpx
	align-items: center
	display: flex
	color: #fff
	font-size: 28rpx
	font-family: Source Han Sans CN
	image
		width: 80rpx
		height: 80rpx
		margin-right: 10rpx
	.data_item_info 
		display: flex
		flex-direction: column
		label
			font-weight: 400
			padding-bottom: 0rpx
		>text
			font-weight: bold
		.rate
			margin-top: 5rpx
			font-size: 26rpx
			font-weight: 400
			display: flex
			align-items: center
			.img2
				width: 32rpx
				height: 32rpx
				margin: 0
			view
				margin-left: 8rpx
				color: #fff
</style>
